<div class="header-container">
  <div class="header-left">
    <a class="header-logo" href="/" target="_self" [title]="appName">
      <img class="logo" src="favicon.ico" width="26px" height="26px" />
      <span class="text">{{appName}}</span>
    </a>
    <d-search class="header-search" [iconPosition]="'left'" [isKeyupSearch]="true" [noBorder]="true"
      (searchFn)="onSearch($event)">
    </d-search>
  </div>
  <div class="header-center">
    <svg viewBox="0,0,300,100">
      <text x="" y="50">
        A moving text
        <animate attributeName="x" from="-100" to="400" dur="4s" repeatCount="indefinite"></animate>
      </text>
    </svg>
  </div>
  <div class="header-right">
    <div class="theme">
      <theme-picker></theme-picker>
    </div>
    <div class="language">
      <language-switch></language-switch>
    </div>
    <img class="devui-logo" title="DevUI" src="{{IMG.DevUILogo}}" alt="" dSimulateATag href="https://devui.design/">
    <div class="header-repo">
      <github-btn [repoName]="appName"></github-btn>
    </div>
  </div>
</div>
